<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <link href="/css/creatEssay.css" rel="stylesheet" type="text/css"/>
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/css/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wangEditor-3.1.1/release/wangEditor.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/css/cropper.min.css">
    <link rel="stylesheet" href="/css/ImgCropping.css">
    <script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/js/createEssay.js"></script>
    <script type="text/javascript" src="/js/mycategorys.js"></script>
    <script type="text/javascript" src="/wangEditor-3.1.1/release/wangEditor.min.js"></script>
    <script type="text/javascript" src="/js/cropper.min.js"></script>
    <script type="text/javascript" src="/js/exif.js"></script>
    <script type="text/javascript" src="/js/addItem.js"></script>

</head>

<body class="body">
<div class="content">
    <div class="head">
        Cloud Note
    </div>
    <div class="_left">
        <div class="operation">
            <a href="/admin/console"><label>操作</label></a>
            <ul>
                <li>
                    <a href="/admin/createEssay">新建文章</a>
                </li>
                <li>
                    <a href="#">草稿箱</a>
                </li>
            </ul>
        </div>

        <div class="classify">
            <label>分类</label>
            <ul id="group_list">
                <li>
                    <a href="/admin/editType">编辑分类</a>
                </li>

            </ul>
        </div>
    </div>


    <div class="editBox">
        <label class="lb">新建文章</label>
        <label>文章标题</label>
        <input type="text" name="essayTitle" id="essayTitle" placeholder="输入文章标题"/>
        <br/>
       <div style="margin-top: 20px">
           <label style="float: left; width: 100px;">上传封面：</label>
           <!--<input  style="float: left;width: 200px;" type="file" onchange="upCover(this)" id="upCover" />-->
           <div class="btn btn-default" id="replaceImg" >
               点击上传图片 <img alt="" width=15% src="">
               <!--<%&#45;&#45;<input class="file" type="file" onchange="addImg(this)"></input>&#45;&#45;%>-->
           </div>
           <img src="" id="coverImg" width="200px">
       </div>
        <label>内容</label>
        <div id="editor">
            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        </div>

        <label class="lb">其他选项</label>
        <div class="other">
            <label class="lb">选择分类</label>
            <div class="type" id="type">

            </div>
            <label class="lb">发布选项</label>
            <b><input type="checkbox" name="caogao" value="1"/>添加到草稿箱</b>
            <br />
            <button type="button" class="btn btn-default button" onclick="submit()">提交</button>
        </div>


    </div>


    <div class="bt"></div>
    <!--图片裁剪框 start-->
    <div style="display: none;z-index: 999" class="tailoring-container">
        <div class="black-cloth" onclick="closeTailor(this)"></div>
        <div class="tailoring-content">
            <div class="tailoring-content-one">
                <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                    选择图片
                </label>
                <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
            </div>
            <div class="tailoring-content-two">
                <div class="tailoring-box-parcel">
                    <img id="tailoringImg">
                </div>
                <div class="preview-box-parcel">
                    <p>图片预览：</p>
                    <div class="square previewImg"></div>
                    <div class="circular previewImg"></div>
                </div>
            </div>
            <div class="tailoring-content-three">
                <button class="l-btn cropper-reset-btn">复位</button>
                <button class="l-btn cropper-rotate-btn">旋转</button>
                <button class="l-btn cropper-scaleX-btn">换向</button>
                <button class="l-btn sureCut" id="sureCut">确定</button>
            </div>
        </div>
    </div>
    <!--图片裁剪框 end-->
</div>

<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.uploadImgServer = '/uploadImgToQn';
    editor.customConfig.uploadFileName = 'imgFile'
    editor.customConfig.uploadImgHooks = {
        before : function(xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success : function(xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail : function(xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error : function(xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout : function(xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert : function(insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.data[0];
            insertImg(url)

            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    }
    editor.create()
    E.fullscreen.init('#editor');


    function upCover(file) {
        // var file = $('#upCover').get(0).files[0];
        var form = new FormData();
        form.append("imgFile", file);

        $.ajax({
            url:"/uploadImgAddToDb",
            type:"post",
            data:form,
            dataType:"JSON",
            cache: false,
            processData: false,
            contentType: false,
            success:function (data) {
                $("#coverImg").attr("src",data.data[0]);
            },
            error:function () {
                alert("error")
            }
        })
    }
</script>

</body>



</html>